<template>
    <div class="baseList">
        <div class="newBox">
    <button class="bt wt-120" @click="handleBulid()">
        新增护理项目
    </button>
</div>
        <div class="tableBoxs">
            <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
            <t-table
                :data="data"
                :columns="COLUMNS"
                :row-key="rowKey"
                vertical-align="middle"
                :hover="true"
                :loading="dataLoading"
                table-layout="fixed"
                table-content-width="100%"
            >
                <!-- 处理序号 -->
                <template #rowIndex="{ rowIndex }">
                    {{ rowIndex + 1 }}
                </template>
                <!-- 图片预览及展示 -->
                <template #image="{ row }">
                    <div class="tdesign-demo-image-viewer__base">
                        <t-image-viewer :images="[row.image]">
                            <template #trigger="{ open }">
                                <div class="tdesign-demo-image-viewer__ui-image">
                                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                                        <span>
                                            <BrowseIcon size="1.4em" /> 预览
                                        </span>
                                    </div>
                                </div>
                            </template>
                        </t-image-viewer>
                    </div>
                </template>
                <!-- 价格拼接 -->
                <template #price="{ row }">
                    {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
                </template>
                <!-- 操作栏 -->
                <!-- 操作栏 -->
    <template #op="{ row }">
      <div class="operateCon">
        <a class="btn-dl" @click="handleClickDelete(row)">删除</a>
        <a class="font-bt" @click="handleEdit(row)">编辑</a>
        <a
          class="delete"
          :class="row.status === 1 ? 'btn-dl' : 'font-bt'"
          @click="handleForbidden(row)"
          >{{ row.status === 1 ? '禁用' : '启用' }}</a
        >
      </div>
    </template>
            </t-table>
            <t-pagination
    v-if="total > 10"
    v-model="pagination.pageNum"
    v-model:pageSize="pagination.pageSize"
    :total="total"
    theme="simple"
    @change="onChange"
    @page-size-change="onPageSizeChange"
    @current-change="onCurrentChange"
  />
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { COLUMNS } from '../constants'
import { MessagePlugin } from 'tdesign-vue-next';



//编辑方法
// const deletePro=()=>{

// }
const editPro=()=>{
    
}
const forbidPro=(row, $index)=>{
    
}
// 行的key
const rowKey = 'index'

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 总条数
  total: {
    type: Number,
    default: 0
  },
  pagination: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 加载状态
  dataLoading: {
    type: Boolean,
    default: false
  }
})


//声明方法
const emit = defineEmits([
    'onChange','handleBulid','handleClickDelete','handleClickDelete','handleForbidden','handleEdit'
])
// 禁用
const handleForbidden = (row) => {
    console.log(6666);
  emit('handleForbidden', row)
}
const handleEdit = (row) => { // 点击编辑执行的方法
  emit('handleEdit', row);
}
// 点击删除
const handleClickDelete = (row) => {
   emit('handleClickDelete', row)
}

//新增按钮
const handleBulid = () =>{
  emit('handleBulid')
}

//点击翻页
const onChange = (val) => {
    emit('onChange', val)
}
//翻页方法
const onPageSizeChange = (size) => {
  console.log('page-size:', size);
  MessagePlugin.success(`pageSize变化为${size}`);
  props.pagination.value.pageSize = size;
};

const onCurrentChange = (index, pageInfo) => {
  MessagePlugin.success(`转到第${index}页`);
  console.log(pageInfo);
  props.pagination.value.pageNum = index;
};
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true
  }
  return false
}

</script>